<template>
  <div class="app-container">
    <el-container>
      <el-header style="margin-top: 20px">Admin Management</el-header>
      <el-main>
        <div v-if="!authenticated" class="center-container">
          <el-card class="light-card">
            <el-form :model="loginForm" label-width="200px" class="login-form">
              <el-form-item>
                <template slot="label">
                  <i class="el-icon-lock"></i> Admin Password
                </template>
                <el-input type="password" v-model="loginForm.password" class="light-input" ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleLogin" @keyup.enter="handleLogin">Login</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
        <div v-else class="full-container">
          <el-card class="light-card-1">
            <el-table :data="users" class="light-table" style="width: 100%;">
              <el-table-column prop="username" label="UserName"></el-table-column>
              <el-table-column prop="email" label="User Email"></el-table-column>
              <el-table-column prop="file" label="File Path"></el-table-column>
              <el-table-column label="Actions">
                <template slot-scope="scope">
                  <el-button type="text" @click="downloadFile(scope.row.file)">Download File</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      authenticated: false,
      loginForm: {
        password: ''
      },
      users: []
    };
  },
  methods: {
    async handleLogin() {
      try {
        const response = await fetch('/api/login', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(this.loginForm)
        });
        const data = await response.json();
        if (response.ok) {
          this.token = data.access_token;
          this.authenticated = true;
          this.fetchUsers();
        } else {
          this.$message.error(data.message);
        }
      } catch (error) {
        this.$message.error('Login failed');
      }
    },
    async fetchUsers() {
      const response = await fetch('/api/users', {
        headers: { 'Authorization': `Bearer ${this.token}` }
      });
      if (response.ok) {
        this.users = await response.json();
      } else {
        this.$message.error('Get data failed for the user');
      }
    },
    async downloadFile(filePath) {
      try {
        // 去掉 "uploads/" 部分，只提取文件名
        const fileName = filePath.replace('uploads/', '');
        const response = await fetch(`/api/download/${encodeURIComponent(fileName)}`, {
          method: 'GET',
          headers: { 'Authorization': `Bearer ${this.token}` }
        });
        if (!response.ok) {
          throw new Error('Download file failed');
        }
        const blob = await response.blob();
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = fileName;
        link.click();
      } catch (error) {
        this.$message.error(error.message);
      }
    }
  }
};
</script>

<style scoped>
.app-container {
  background-color: #ffffff; /* 白色背景 */
  color:#004488; /* 蓝色文字 */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

el-header {
  background-color: #f0f0f0; /* 淡灰色背景 */
  color:#004488; /* 蓝色文字 */
  padding: 20px;
  text-align: center;
  font-size: 1.5em;
}

el-main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.full-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.light-card {
  background-color: #ffffff; /* 白色背景 */
  border: 1px solid #dcdcdc;
  color:#004488; /* 蓝色文字 */
  width: 100%;
}

.light-card-1 {
  background-color: #ffffff; /* 白色背景 */
  border: 1px solid #dcdcdc;
  color:#004488; /* 蓝色文字 */
  width: 100%;
}

.light-input input {
  background-color: #f0f0f0; /* 淡灰色背景 */
  border: 1px solid #dcdcdc;
  color:#004488; /* 蓝色文字 */
}

.light-table .el-table {
  background-color: #ffffff; /* 白色背景 */
}

.el-table th, .el-table td {
  background-color: #ffffff; /* 白色背景 */
  color:#004488; /* 蓝色文字 */
}

.el-button--primary {
  background-color:#004488; /* 蓝色按钮 */
  border-color:#004488; /* 蓝色按钮边框 */
  color: #ffffff; /* 按钮文字白色 */
}

.el-button--primary:hover {
  background-color: #3333ff; /* 浅蓝色按钮 */
  border-color: #3333ff; /* 浅蓝色按钮边框 */
  color: #ffffff; /* 按钮文字白色 */
}

.login-form {
  max-width: 400px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  el-header {
    font-size: 1.2em;
    padding: 15px;
  }
  .light-card {
    margin: 10px;
    padding: 10px;
  }
  .light-card-1 {
    margin: 10px;
    padding: 10px;
  }
}
</style>
